.article {
  @apply -text-[--font-size-article] -break-words;
  hyphens: auto;
}
.article h1,
.article h2,
.article h3,
.article h4
{
  @apply -my-[--article-heading-space];
}
.article p,
.article ul,
.article ol,
.article figure,
.article blockquote,
.article video,
.article audio,
.article table,
.article img {
  @apply -my-[--article-p-space];
}

.article p {
  min-height: 1em;
}
.article p:empty::before {
  content: ' ';
  display: inline-block
}

.article hr {
  @apply -my-[--article-hr-space];
}

.article table {
  @apply -border;
}
.article td, .article th {
  @apply -border-b -p-[--article-cell-padding];
}
.article thead {
  background-color: var(--table-head-bg, var(--color-gray-100));
}

.article table *,
.article ul *,
.article ol * {
  @apply -my-0;
}

.article pre {
  @apply -border -rounded -bg-gray-50;
}
